import React, { PureComponent } from 'react';
import { createBottomTabNavigator, BottomTabBar } from 'react-navigation-tabs';
// import { tabBarRoutes, originalRoutes, parentRoutes, childRoutes } from './root.route';
// import Parent from './modules/parent/parent.page';
// import Ionicons from '@expo/vector-icons';
import { AntDesign, Ionicons } from '@expo/vector-icons'; 
import Child from './modules/child.page';
import HomeStack from './modules/home/home.route';
import { Home, Home1, Home2, } from './modules/home/home.index';
import { Parent, Parent1, Parent2, } from './modules/parent/parent.index';
import IconWithBadge from './components/iconWithBadge';
import Mine from './modules/setting/mine.page';

const defaultNavigationOptions = ({navigation}) => {
  return {
    tabBarIcon: ({ focused, horizontal, tintColor }) => {
      const { routeName } = navigation.state;
      let IconComponent = Ionicons;
      let iconName;
      // console.log('routeName: ', routeName);
      if (routeName === 'home') {
        iconName = focused
          ? 'ios-home-sharp'
          : 'ios-home-outline';
        // Sometimes we want to add badges to some icons.
        // You can check the implementation below.
        // IconComponent = IconWithBadge;
      } else if (routeName === 'parent') {
        iconName = focused
          ? 'ios-people'
          : 'ios-people-outline';
        IconComponent = IconWithBadge;
      } else if (routeName === 'child') {
        iconName = focused
          ? 'man-sharp'
          : 'man-outline';
        IconComponent = IconWithBadge;
      } else if (routeName === 'mine') {
        iconName = focused
          ? 'person'
          : 'person-outline';
        // IconComponent = IconWithBadge;
      }
  
      // You can return any component that you like here!
      return <IconComponent name={iconName} size={25} color={tintColor} />;
    },
  };
}


const tabBarOptions = {
  activeTintColor: 'purple',
  showIcon: true,
  showLabel: true,
  labelPosition: 'below-icon',
  // style: {
  //   height: 85,
  // },
  // labelStyle: {
  //   bottom: 11,
  // },
}

export const tabBarRoutes = {
  home: Home, // HomeStack,
  parent: Parent,
  child: Child,
  mine: Mine,
};

const rHome = { key: 'home', routeName: 'home', params: undefined };
const rParent = { key: 'parent', routeName: 'parent', params: undefined };
const rChild = { key: 'child', routeName: 'child', params: undefined };
const rMine = { key: 'mine', routeName: 'mine', params: undefined };

export const originalRoutes = [
  rHome, rMine
];

export const parentRoutes = [
  originalRoutes[0],
  rParent,
  originalRoutes[1]
];

export const childRoutes = [
  originalRoutes[0],
  rChild,
  originalRoutes[1]
];

//自定义BottomTabBar
class CustomBottomTabBar extends PureComponent {
  // state = {
  //   userRole: 'parent'
  // };

  componentDidMount = () => {
    // console.log('>>>>>', this.props.navigation.state);
    // // 这里监听一个事件，如果需要显示商品推荐页面，则将showMarket置为true
    // this.subscribe = DeviceEventEmitter.addListener('setUserRole', (role) => {
    //   console.log('setUserRole --->>>>', role);
    //   this.setState({
    //     userRole: role
    //   });
    // });
  };

  componentWillUnmount = () => {
    // this.subscribe && this.subscribe.remove();
  };

  // 这里对navigation进行处理，注意这里不能直接修改props.navigation,会报错，
  //所以只需要传入一个自定义的navigation，而BottomTabBar只会用到navigation.state中routes和index,
  //所以就构造这么一个虚假的navigation就可以了
  dealNavigation = () => {
    const { routes, index, params } = this.props.navigation.state;
    // console.log('dealNavigation >>', routes, index, params?.userRole);
    // 根据是否需要显示商品推荐菜单来决定state中的routes
    let finalRoutes = originalRoutes;
    if (params?.userRole === 'parent') {
      finalRoutes = parentRoutes; // originalRoutes.filter(route => route.key !== 'child');
    } else if (params?.userRole === 'child') {
      finalRoutes = childRoutes; // originalRoutes.filter(route => route.key !== 'parent');
    }
    
    const currentRoute = routes[index];
    return {
      state: {
        index: finalRoutes.findIndex(route => currentRoute.key === route.key), //修正index
        routes: finalRoutes
      }
    };
  };

  render() {
    const { navigation, ...restProps } = this.props;
    const myNavigation = this.dealNavigation();
    return <BottomTabBar {...restProps} navigation={myNavigation} />;
  }
}

const CustomTabRouter = createBottomTabNavigator(tabBarRoutes, {
  initialRouteName: 'mine',
  defaultNavigationOptions,
  tabBarOptions,
  tabBarComponent: CustomBottomTabBar,
});

class DynamicTab extends PureComponent {
  //这里必须有这个静态属性，表示将这个页面视为一个navigator，这样才能和AppStack共用一套导航系统
  static router = CustomTabRouter.router;

  render() {
    const { navigation } = this.props;
    return <CustomTabRouter navigation={navigation} />;
  }
}

export default DynamicTab;
